<template>
  <div>
    <!-- <button @click="convertToPDF">打印</button> -->
    <!-- <button @click="uploadData">打印</button> -->
    <!-- <div id="myDiv"> -->
      <temperature id="myDiv" :tempData="tempData" :pulseData="pulseData" @upadted="convertToPDF"></temperature>
    <!-- </div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import html2canvas from 'html2canvas'
import jspdf from 'jspdf'
import temperature from './temperature.vue'

let imgList: any = ref([])
const convertToPDF = () => {
  const div: any = document.getElementById('myDiv');
  html2canvas(div).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    // 将base64字符串转换为Blob对象
    const blob = dataURLtoBlob(imgData);
    // 创建临时的URL
    const objectURL = URL.createObjectURL(blob);
    // 现在你可以使用objectURL作为图片的src属性
    console.log(11111,objectURL);
    // console.log('图片',imgData)
    imgList.value.push(objectURL)
    if(imgList.value.length == 5){
      imagesToPdf(imgList.value,'测试')
    }else{
      uploadData()
    }
    window.parent.postMessage({
        data: {
        code:"success",
        test:imgList.value.length
        }
    }, '*');
    console.log('图片列表',imgList.value)

    // const pdf = new jspdf({
    //   orientation: 'portrait',
    //   unit: 'px',
    //   format: [canvas.width, canvas.height]
    // });
    // const imgProps= pdf.getImageProperties(imgData);
    // const pdfWidth = pdf.internal.pageSize.getWidth();
    // const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    // pdf.addImage(imgData, 'PNG', 30, 30, pdfWidth - 50, pdfHeight - 50);
    // pdf.save('download.pdf');
  });
}



const dataURLtoBlob = (dataurl: any) => {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

// const savePdf = (canvas: any,imgData: any)=>{
//   const pdf = new jspdf({
//       orientation: 'portrait',
//       unit: 'px',
//       format: [canvas.width, canvas.height]
//     });
//   const imgProps= pdf.getImageProperties(imgData);
//   const pdfWidth = pdf.internal.pageSize.getWidth();
//   const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
//   pdf.addImage(imgData, 'PNG', 30, 30, pdfWidth - 50, pdfHeight - 50);
//   pdf.save('download.pdf');
// }
const imagesToPdf = (images: any, pdfName: any) => {
  const pdf = new jspdf('p', 'mm', 'a4'); // 创建PDF，'p'代表横向，'mm'代表毫米单位，'a4'代表页面大小
  images.forEach((imgSrc: any, index: any) => {
    const img = new Image();
    img.crossOrigin = 'Anonymous'; // 跨域图片可能需要设置这个属性
    img.onload = () => {
      // 添加图片到PDF
      const imgWidth = pdf.internal.pageSize.getWidth();
      const imgHeight = (imgWidth * img.height) / img.width;
      pdf.addImage(img, 'PNG', 10, 10, imgWidth - 20, imgHeight - 20);
      if (index < images.length - 1) {
        pdf.addPage(); // 如果不是最后一张图片，添加一个新页面
      } else {
        pdf.save(pdfName + '.pdf'); // 保存PDF
      }
    };
    img.src = imgSrc;
  });
}
const tempData: any = ref([])
const pulseData: any = ref([])
const withData = ()=>{
  let data: any = []
  let data1: any = []
  Array.from({length: 20}, (_, index) => {
    data.push(
      {year: index+1,value: Math.floor(Math.random() * (41 - 34 + 1)) + 34}
    )
    data1.push(
      {year: index+1,value: Math.floor(Math.random() * (160 - 0 + 1)) + 0}
    )
  })
  tempData.value = data
  pulseData.value = data1
  console.log('数据',tempData)
}
const uploadData = ()=>{
  withData()
}
onMounted(async()=>{
  setTimeout(()=>{
    withData()
  },2000)
  
  // await convertToPDF()
  // await convertToPDF()
  // console.log('加载')

})
</script>
<style scoped lang='less'>
</style>